//自调用函数  小蛇
(function () {
  //存放身体的每个部分
  var elements = [];
  function Snake (width, height, direction) {
    //小蛇每个部分的宽 高
    this.width = width || 20;
    this.height = height || 20;
    //小蛇的身体
    this.body = [
      { x: 3, y: 2, color: 'red' },
      { x: 2, y: 2, color: 'orange' },
      { x: 1, y: 2, color: 'orange' },
    ];
    //移动方向
    this.direction = direction || 'right';
  }
  //为原型添加方法  小蛇初始化的方法
  Snake.prototype.init = function (map) {
    //因为蛇移动属于重新创建 所以先删除
    remove();
    //循环遍历创建div  蛇身体构建
    for (var i = 0; i < this.body.length; i++) {
      //数组中的每个数组都是一个对象   接收以便于赋值
      var obj = this.body[i];
      //创建一个div 蛇身
      var div = document.createElement('div');
      //将div放入地图
      map.appendChild(div);
      //改变文档流
      div.style.position = 'absolute';
      //改变蛇身的宽高
      div.style.width = this.width + 'px';
      div.style.height = this.height + 'px';
      //改变蛇身的位置
      div.style.left = obj.x * this.width + 'px';
      div.style.top = obj.y * this.height + 'px';
      //改变蛇头  蛇身的位置
      div.style.backgroundColor = obj.color;
      //把div加入到elements数组中   目的是为了删除
      elements.push(div);
    }
  };
  Snake.prototype.move = function (food, map) {
    //蛇头分开计算方向   所以先算蛇身
    var i = this.body.length - 1;
    for (; i > 0; i--) {
      //蛇身的位置   起着跟随的作用
      this.body[i].x = this.body[i - 1].x;
      this.body[i].y = this.body[i - 1].y;
    }
    //蛇头判断方向   this.body[1]的x,y值会一直跟着this.body[0]
    switch (this.direction) {
      case 'right':
        this.body[0].x += 1;
        break;
      case 'left':
        this.body[0].x -= 1;
        break;
      case 'top':
        this.body[0].y -= 1;
        break;
      case 'bottom':
        this.body[0].y += 1;
        break;
    }
    //判断有没有吃到食物
    //获取蛇头的x y位置
    var headX = this.body[0].x * this.width
    var headY = this.body[0].y * this.height
    //当小蛇的头的坐标和食物于坐标一致   吃了食物  就追加一个尾巴
    if (headX == food.x && headY == food.y) {
      var last = this.body[this.body.length - 1];
      this.body.push({
        x: last.x,
        y: last.y,
        color: last.color
      })
      //把食物删掉，重新初始化
      food.init(map);
    }
  };
  //删除小蛇的私有的函数   移动时小蛇属于重新架构  所以也要重新创建
  function remove () {
    //删除map中小蛇的每个div，同时删除elements数组中的每个元素，从蛇尾向蛇头方向删除div
    //倒着删视觉效果没有误差
    var i = elements.length - 1;
    //i不能大于0，不然删不了蛇头
    for (; i >= 0; i--) {
      var ele = elements[i];
      //利用父级抹杀 子级
      ele.parentNode.removeChild(ele);
      elements.splice(i, 1)
    }
  }
  //把 Snake暴露给window  让外部可以访问
  window.Snake = Snake;
}());